<template>
	<div class="layout-pd">
		<zh-header-toolbar extra="">
			<zh-button style="margin-left: 8px" button-type="add" @click="addBanner" v-func:banner0004> 新增 </zh-button>
			<zh-button style="margin-left: 8px" button-type="edit" @click="editBanner" v-func:banner0005>编辑 </zh-button>
			<zh-button style="margin-left: 8px" button-type="del" @click="deleteBanner" v-func:banner0006>删除 </zh-button>
			<zh-button style="margin-left: 8px" icon="ele-Refresh" type="warning" v-func:banner0008
				@click="clearCahce">清除缓存</zh-button>
		</zh-header-toolbar>
		<zh-space>
			<zh-card title="">
				<zh-form ref="paramsQueryForm" :model="state.queryParam">
					<zh-form-input prop="title" label="标题" placeholder="支持模糊查询"
						v-model="state.queryParam.title"></zh-form-input>
					<zh-form-select prop="bannerStatus" label="状态" :options="state.statusDict"
						v-model="state.queryParam.bannerStatus"></zh-form-select>

					<template v-if="state.advanced">
						<zh-form-select prop="linkType" label="链接类型" :options="state.dictData.linkType"
							v-model="state.queryParam.linkType"></zh-form-select>
						<zh-form-select prop="bannerType" label="轮播类型" :options="state.dictData.bannerType"
							v-model="state.queryParam.bannerType"></zh-form-select>
						<zh-form-select prop="type" label="轮播文件类型" :options="state.typeDictData"
							v-model="state.queryParam.type"></zh-form-select>
						<zh-form-choose-org prop="orgId" label="所属组织" v-model="state.queryParam.orgId"></zh-form-choose-org>
						<zh-form-cascader prop="areaCode" label="行政区划" placeholder="请选择" v-model="state.queryParam.areaCode"
							:props="{ checkStrictly: true, emitPath: false }"
							:options="state.areaCodeSelectTreeData"></zh-form-cascader>
						<zh-form-select prop="appId" :lazy="true" label="所属应用" v-model="state.queryParam.appId"
							:fieldNames="{ label: 'appName', value: 'appId' }" funcCode="application0012"
							searchField="appName"></zh-form-select>
					</template>
					<zh-form-query v-model="state.advanced" :form-ref="paramsQueryForm" :table-ref="bannerListTable">
					</zh-form-query>
				</zh-form>
			</zh-card>
			<zh-table ref="bannerListTable" title="轮播图列表" :height="600" funcCode="banner0001" :columns="state.tableColumn"
				:disabled="false" @radio-change="radioChangeEvent" :radio-config="{ trigger: 'row' }" highlight-current-row>
				<template #status_default="{ row }">
					<zh-badge :status="statusMap[row.bannerStatus].status" :text="statusMap[row.bannerStatus].text" />
				</template>
				<template #img_default="{ row }">
					<el-image style="width: 100px; height: 100px" :src="row.videoImg ? row.videoImg+getFileSignParams() : row.url+getFileSignParams()" :zoom-rate="1.2"
						:preview-src-list="getSrcList(row)" :initial-index="4" fit="cover" />
				</template>
			</zh-table>
		</zh-space>
		<zh-dialog :title="state.modalTitle" width="60%" v-model="state.visible" @confirm="save">
			<BannerForm ref="bannerPage" :showFlag="state.showFlag" :bannerInfo="state.selectData" v-model="state.visible">
			</BannerForm>
		</zh-dialog>
	</div>
</template>

<script lang="ts" setup name="bannerManager">
import BannerForm from './component/BannerForm.vue';
import { getFileSignParams } from '@/utils/signatureUtil';
//------------------定义子组件---------------------------
const paramsQueryForm = ref<any>({});
const bannerListTable = ref<any>({});
const bannerPage = ref<any>({});

//------------------内部变量定义-------------------------
const statusMap = {
	0: {
		status: 'error',
		text: '禁用',
	},
	1: {
		status: 'processing',
		text: '启用',
	},
};
const state = reactive({
	description: '轮播图管理',
	dictData: {} as any,
	statusDict: [
		{
			dictKey: '0',
			dictValue: '禁用',
		},
		{
			dictKey: '1',
			dictValue: '启用',
		},
	],
	visible: false,
	form: null,
	// 高级搜索 展开/关闭
	advanced: false,
	// 查询参数
	queryParam: {
		bannerStatus: '1'
	} as any,
	areaCodeSelectTreeData: [],
	// 表头
	loading: false,
	tablePage: {
		total: 0,
		currentPage: 1,
		pageNum: 1,
		pageSize: 20,
	},
	typeDictData: [{ dictKey: 'image', dictValue: '图片' }, { dictKey: 'video', dictValue: '视频' }],
	tableColumn: [
		{ type: 'radio', width: 50, fixed: 'left' },
		{ type: 'seq', width: 80, fixed: 'left', align: 'center', title: '序号' },
		{ field: 'bannerId', title: '轮播图Id', visible: false, fixed: 'left', align: 'center', width: 150 },
		{ field: 'title', title: '标题', align: 'center', fixed: 'left', width: 150 },
		{
			field: 'img', title: '图片', align: 'center', width: 250,
			slots: {
				default: 'img_default',
			},
		},
		{ field: 'bannerTypeName', title: '轮播类型', align: 'center', width: 150 },
		{
			field: 'bannerStatus',
			title: '状态',
			align: 'center',
			width: 80,
			slots: {
				default: 'status_default',
			},
		},
		{ field: 'typeName', title: '轮播文件类型', align: 'center', width: 150 },
		{ field: 'linkTypeName', title: '链接类型', align: 'center', width: 150 },
		{ field: 'linkUrl', title: '链接地址', align: 'center', width: 150 },
		{ field: 'linkPath', title: '内部路由路径', align: 'center', width: 150 },
		{ field: 'linkName', title: '内部路由名', align: 'center', width: 150 },
		{ field: 'linkParams', title: '链接参数', align: 'center', width: 150 },
		{ field: 'orgName', title: '所属组织', align: 'center', width: 250 },
		{ field: 'areaName', title: '行政区划名称', align: 'center', width: 250 },
		{ field: 'appName', title: '所属应用', align: 'center', width: 250 },
		{ field: 'remarks', title: '备注', align: 'center', showOverflow: true, width: 350 },
	],
	modalTitle: '操作',
	selectData: {} as any,
	showFlag: false,
});

//------------------定义调用方法-------------------------
function radioChangeEvent({ row }) {
	state.selectData = row;
}
function getSrcList(row: any) {
	let srcList = [] as any;
	if (row.videoImg) {
		srcList.push(row.videoImg + getFileSignParams())
	} else {
		if (row.type === 'image') {
			srcList.push(row.url + getFileSignParams())
		}
	}
	return srcList;
}
function addBanner() {
	state.modalTitle = '新增轮播图';
	state.selectData = {};
	bannerListTable.value.clearRadioRow()
	state.showFlag = false;
	state.visible = true;
}
function editBanner() {
	state.modalTitle = '修改轮播图';
	if (!state.selectData || !state.selectData.bannerId) {
		$messageBox.warning('请先选择需要修改的数据', '提示');
		return;
	}
	state.showFlag = false;
	state.visible = true;

}
function save() {
	bannerPage.value.save().then(() => {
		bannerListTable.value.query(state.queryParam);
	});
}
function deleteBanner() {
	if (!state.selectData || !state.selectData.bannerId) {
		$messageBox.warning('请先选择需要删除的数据', '提示');
		return;
	}
	let params = { bannerId: state.selectData.bannerId }
	setTimeout(() => {
		$api.common.send
			.post('banner0006', params)
			.then(() => {
				$messageBox.success('删除参数成功', '成功提示');
				bannerListTable.value.refresh(state.queryParam);
			})
			.catch(() => { });
	}, 20);
}
function clearCahce() {
	if (!state.selectData || !state.selectData.bannerId) {
		$messageBox.warning('请先选择需要清除缓存的数据', '提示');
		return;
	}
	let params = { bannerId: state.selectData.bannerId }
	setTimeout(() => {
		$api.common.send
			.post('banner0008', params)
			.then(() => {
				$messageBox.success('清除成功', '成功提示');
			})
			.catch(() => { });
	}, 20);
}
function getAreaCodeData() {
	setTimeout(() => {
		$api.common.send.post('dict0026', {}).then((res) => {
			state.areaCodeSelectTreeData = res.result;
		});
	}, 20);
}
//------------------初始化------------------------------
const params = {
	dictFields: 'linkType,bannerType',
};
$api.common.getBatchDict.post(params).then((res) => {
	state.dictData = res.result;
});
onMounted(() => {
	nextTick(() => {
		bannerListTable.value.query(state.queryParam);
		getAreaCodeData();
	})
});
</script>
